<template>
    <div id="home" class="home">
    </div>
</template>
<script>
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls.js'
import {
    RGBELoader
} from 'three/examples/jsm/loaders/RGBELoader'
import ONE from '../assets/img/1.jpg'
import TWO from '../assets/img/2.jpg'
import TWOPLUS from '../assets/img/3.jpg'
import FOUR from '../assets/img/4.jpg'
import FIVE from '../assets/img/5.jpg'
import SIX from '../assets/img/6.jpg'
import BOLLROOM from '../assets/hdr/ballroom_4k.hdr'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 1);
scene.add(camera);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true

const rgbeloader = new RGBELoader()

export default {
    data() {
        return {
            controls: null
        }
    },
    mounted() {
        this.womdowEvent()
        // this.addBox()
        this.addHdr()
        document.getElementById('home').appendChild(renderer.domElement);
        this.render()

    },
    methods: {
        windownEvent() {
            window.addEventListener('resize', (e) => {
                // 宽高比
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setPixelRatio(window.devicePixelRatio);
            })
        },
        render() {
            renderer.render(scene, camera);
            requestAnimationFrame(this.render);
        },
        addBox() {
            const geometry = new THREE.BoxGeometry(10, 10, 10);
            var arr = [ONE, TWO, TWOPLUS, FOUR, FIVE, SIX]
            var boxMaterial = []
            arr.forEach(item => {
                let textureLoader = new THREE.TextureLoader().load(item)
                boxMaterial.push(new THREE.MeshBasicMaterial({ map: textureLoader }))
            })
            console.log(boxMaterial)
            // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            // const cube = new THREE.Mesh(geometry, material);
            const cube = new THREE.Mesh(geometry, boxMaterial);
            cube.geometry.scale(1, 1, -1)
            scene.add(cube);
        },
        addHdr() {
            rgbeloader.loadAsync(BOLLROOM).then((texture) => {
                texture.mapping = THREE.EquirectangularReflectionMapping
                scene.background = texture
                scene.environment = texture
            })
        }
    }
}
</script>
<style>
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#home {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>